<template>
    <div class="description">
        一、给echart设置背景的两种方式:<br>
        1、 grid: {show: false,backgroundColor: "#eee"}<br>
        2、 xAxis: {splitArea: {show: true,areaStyle: {color: 'rgba(0,0,0,0.03)'}},}<br>
    </div>
    <div class="item mt5">
        <div ref="echart1" class="echart1 fl"></div>
        <div ref="echart2" class="echart2 fr"></div>
        <div class="clr"></div>
    </div>
    <div class="action">
        <el-button @click="changeVisualMapDimension1">visualMap_1</el-button>
        <el-button @click="changeVisualMapDimension2">visualMap_2</el-button>
    </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onMounted, ref, markRaw } from 'vue';
import _ from "lodash";
import * as echarts from "echarts";
defineProps({
    msg: {
        type: String,
        default: "hello1111111"
    }
})

const state = reactive({
    count: 0,
    echart1: null,
    echart2: null,
    ehcart1Ins: null as any,
    ehcart2Ins: null as any,
    visualMapLengnd: false
})

//必须toRefs处理后结构，否则失去响应性
const { echart1, echart2, visualMapLengnd } = toRefs(state);

const methods = {
    dataNum: 20,            //横轴数据量
    buildxAxis() {
        return new Array(this.dataNum).fill("")
            .map((item, index) => {
                return `No.${index + 1}`;
            })
    },
    buildSerise() {
        return new Array(this.dataNum).fill("")
            .map((item, index) => {
                return parseInt(Math.random() * 100);
            })
    },
    buildEchart(customOption = {}) {
        let xaxis = this.buildxAxis();
        let option = {
            title: {
                text: "第一张折线图"
            },
            grid: {
                show: false,     //是否显示直角坐标系网格。  四周的边框
                width: "auto",
                containLabel: false,
                backgroundColor: "#eee",    //show:true时生效
            },
            legend: {},
            tooltip: {
                show: true,
                trigger: 'axis',     //item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用    axis：坐标轴触发（柱状图，折线图）
                formatter: '{a0}-{b0}: {c0}<br />{a1}-{b1}: {c1}',
                backgroundColor: 'rgba(50,50,50,0.7)',
                textStyle: {
                    color: "#fff"
                }
            },
            visualMap: [
                {
                    type: 'piecewise',
                    show: false,
                    dimension: 0,
                    seriesIndex: 0,
                    pieces: [
                        {
                            gt: 1,
                            lt: 3,
                            color: 'rgba(0, 0, 180, 0.4)'
                        },
                        {
                            gt: 4,
                            lt: 5,
                            color: 'rgba(0, 0, 180, 0.4)'
                        }
                    ]
                }
            ],
            xAxis: {
                name: "序号",
                type: 'category',
                data: xaxis,
                // boundaryGap :true,
                axisLabel: {
                    show: true,
                    inside: false,
                    // rotate: -20,
                    interval: 1,    //0:强制显示所有
                    // margin: 8,
                    formatter: "{value}",
                    textStyle: {
                        color: function (value, index) {
                            return index >= 5 ? 'green' : 'red';
                        },
                    }
                },
                //横轴主线
                axisLine: {
                    show: true,
                    symbol: ["none", "arrow"],
                    symbolOffset: [0, -20]
                },
                //刻度线
                axisTick: {
                    show: true,      //横轴刻度线
                    alignWithLabel: true,    //刻度和标签对齐
                    // interval: 0,     //0:强制显示所有
                    lineStyle: {    //样式设置
                        color: "#f00"
                    }
                },
                //次刻度线
                minorTick: {
                    show: true
                },
                // 分隔区域
                splitArea: {
                    show: true,
                    interval: 0,
                    areaStyle: {
                        color: ['rgba(255,0,0,0.03)', 'rgba(0,0,255,0.03)']
                    }
                },
                // 坐标轴指示器 hover时的线条
                axisPointer: {
                    show: true,
                    type: "line" //可以是线，也可以是背景色
                }
            },
            yAxis: {
                name: "个",
                type: 'value',
                axisLine: {
                    show: true,
                    symbol: ["none", "arrow"],
                    symbolOffset: [0, 0]
                },
            },
            series: [
                {
                    name: "图形1",
                    data: this.buildSerise(),
                    type: 'line',
                    smooth: 0.6,
                    symbol: 'none',
                    lineStyle: {
                        color: '#5470C6',
                        // width: 3
                    },
                    areaStyle: {},
                    markLine: {
                        symbol: ['circle', 'none'],
                        label: { show: true },
                        data: [{ xAxis: "No.2" }, { xAxis: 3 }, { xAxis: 4 }, { xAxis: "No.6" }]       //
                    },
                },
                {
                    name: "图形2",
                    data: this.buildSerise(),
                    type: 'line'
                },
                {
                    // 背景色
                    name: '',
                    type: 'line',
                    markArea: {
                        itemStyle: {
                            color: 'rgba(255, 0, 0, 0.1)'
                        },
                        data: [
                            [
                                {
                                    name: '区间1',
                                    xAxis: 'No.2',
                                    itemStyle: {
                                        color: "rgba(0, 0, 255, 0.1)"
                                    }
                                },
                                {
                                    xAxis: 'No.4'
                                }
                            ],
                            [
                                {
                                    name: '区间2',
                                    xAxis: 'No.5'
                                },
                                {
                                    xAxis: 'No.6'
                                }
                            ]
                        ]
                    }
                }
            ]
        };
        let OPTION = _.merge(option, customOption);
        console.log("%cOption：", "color:red",OPTION);
        state.ehcart1Ins.setOption(OPTION);
        state.ehcart2Ins.setOption(OPTION);
    },
    changeVisualMapDimension1() {
        let customOption = {
            visualMap: [
                {
                    type: "piecewise",      //分段式
                    show: state.visualMapLengnd,          //是否开启图例
                    dimension: 0,           //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组
                    seriesIndex: 1,
                    pieces: [
                        {
                            lte: 1,         //这里的数字是索引,从0开始
                            color: 'green'
                        },
                        {
                            gt: 1,
                            lte: 3,
                            color: 'red'
                        },
                        {
                            gt: 3,
                            lte: 4,
                            color: 'green'
                        },
                        {
                            gt: 4,
                            lte: 5,
                            color: 'red'
                        },
                        {
                            gt: 5,
                            color: 'green'
                        }
                    ]
                }
            ]
        };
        methods.buildEchart(customOption);
    },
    changeVisualMapDimension2() {
        let customOption = {
            visualMap: [
                {
                    type: "piecewise",      //分段式
                    show: state.visualMapLengnd,          //是否开启图例
                    dimension: 1,           //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组
                    seriesIndex: 1,
                    pieces: [
                        {
                            lte: 140,         //这里的数字是索引,从0开始
                            color: 'green'
                        },
                        {
                            gt: 140,
                            lte: 160,
                            color: 'red'
                        },
                        {
                            gt: 160,
                            color: 'green'
                        }
                    ]
                }
            ],
        };
        methods.buildEchart(customOption);
    },
};
const { changeVisualMapDimension1, changeVisualMapDimension2 } = methods;


onMounted(() => {
    state.ehcart1Ins = markRaw(echarts.init(echart1.value));
    state.ehcart2Ins = markRaw(echarts.init(echart2.value));

    state.ehcart1Ins.group = "group1";
    state.ehcart2Ins.group = "group1";

    echarts.connect([state.ehcart1Ins, state.ehcart2Ins]);
    methods.buildEchart();

});
</script>

<style lang="scss" scoped>

.echart1,
.echart2 {
    width: 50%;
    height: 300px;
}

.action {
    display: flex;
    justify-content: center;
}
</style>